<template>
  <div id="my">
    <van-cell-group>
      <van-cell>
        <template slot="title">
          <!-- 未登录状态 -->
          <div class="info-div" v-if="!user">
            <van-image round :src="images.grey"/>
            <van-tag @click="goToPage('login')">立即登录</van-tag>
          </div>
          <div class="info-div" v-else>
            <van-image round :src="images.nomal"/>

            <div class="info">
              <h3>{{ user.nickname }}</h3>
              <van-tag>{{ user.user_type_name }}</van-tag>
            </div>
          </div>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group>
      <van-cell title="基本信息" to="/user/info" icon="friends" is-link></van-cell>
      <van-cell title="修改密码" to="/user/updatePwd" icon="setting" is-link></van-cell>
    </van-cell-group>

    <van-cell-group>
      <van-cell title="联系客服" to="/user/service" icon="phone" is-link></van-cell>
      <van-cell title="意见反馈" to="/user/idea" icon="comment-circle" is-link></van-cell>
    </van-cell-group>

    <van-cell-group>
      <van-cell title="退出" @click="logout" icon="logistics" is-link></van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import {user} from "../../request/api";

export default {
  name: "Index",
  data() {
    return {
      user: {}, images: {
        grey: require('../../assets/images/login/grey.jpg'),
        nomal: require('../../assets/images/login/normal.png')
      }
    }
  },
  created() {
    //this.getUserInfo();
    this.user = JSON.parse(localStorage.getItem('ba_user'));
  },
  methods: {
    async getUserInfo() {
      const res = await user.read();
      res.data.code == 1 && (this.user = res.data.data);
    },
    tabChange(index) {
      //console.log(index);
    },
    logout() {
      this.$dialog.confirm({title: '提示', message: '您确认退出吗？'}).then(() => {
        localStorage.clear();
        this.$router.replace('/login');
      });
    }
  }
}
</script>

<style scoped>
#my {
  background: #f5f5f5;
}

#my .van-cell-group {
  margin-bottom: 10px;
}

#my .info-div {
  display: flex;
  align-items: center;
}

#my .info-div .van-image {
  margin-right: 10px;
  width: 4rem;
  height: 4rem;
}

#my .info-div .info h3 {
  padding: 0;
  margin: 0;
  margin-bottom: 0.4rem;
}

</style>
